<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>商品列表</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/detail.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
<script src="js/share.js" type="text/javascript" charset="utf-8"></script>
<script src="js/operate.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<div id="slideBar">
	<a class="shopCar flex-col" href="shopCar.html">
		<span class="icon"><img src="image/icon/slide-icon.png" /></span>
		<span class="num">5</span>
	</a>
	<a class="contact flex-col" href="tel:110">
		<span class="icon"><img src="image/icon/slide-icon.png" /></span>
	</a>
</div>

<footer class="footer top-line main-line flex-row" id="bottomBtn">
	<!--<a class="icon-1 icon flex-row right-line" href="tel:110">
		<span></span>
	</a>
	<a class="icon-2 icon flex-row right-line" href="shopCar.html">
		<span></span>
		<i class="num">6</i>
	</a>-->
	<a class="icon-3 icon flex-row right-line" onclick="openShare()">
		<span></span>
	</a>
	<a class="buy btn" onclick="buy(0)">立即购买</a>
	<a class="shop btn" onclick="buy(1)">加入购物车</a>
</footer>

<div class="swiper-container Main" id="Main">
	<div class="swiper-wrapper">
		<div class="swiper-slide content">
			
			<div class="children" id="detail">
				
				<!--大图-->
				<div class="bigPic">
					<div class="pt">
						<img src="image/test/pro-full.png" />
					</div>
					<a class="help flex-row" id="helpMod">
						<span class="icon"></span>
						<span class="num">128</span>
					</a>
				</div>
				<div class="bg-w info-wrap dm-mb">
					<ul class="info-box flex-row">
						<li class="info flex-full right-line">
							<h5 class="name">男式V领精致缩绒套头羊毛衫</h5>
							<h2 class="val">￥12000.00</h2>
						</li>
						<li class="collect-mod" id="collectMod">
							<span class="icon"></span>
							<h5 class="txt">收藏</h5>
						</li>
					</ul>
					<ol class="arrow flex-row viplink" onclick="location.href='personal_vip.html'">
						<li class="txt flex-full">成为会员即享会员最低价</li>
						<li class="link">立即开通</li>
					</ol>
				</div>
				
				<div class="bg-w detail-box">
					<h5 class="dm-title">商品详情</h5>
					<div class="detail-txt">
						<img src="image/test/detail.jpg" />
					</div>
				</div>
				
			</div>
			
		</div>
	</div>
</div>

<!--选择规格-->
<div id="specMask" style="display: none;">
	<div class="mask"></div>
	<div class="spec_wrap">
		
		<div class="specMod">
			<a class="close" onclick="closeSpecMask()">×</a>
			<ol class="goodBox flex-row">
				<li class="pt cover">
					<img src="image/test/pro-1.png" />
				</li>
				<li class="info flex-full">
					<h5 class="val">价格：￥69.00</h5>
					<h5 class="tag">已选：<span id="selSpec">神秘黑 大号</span></h5>
				</li>
			</ol>
			<div class="specBlk">
				<dl class="spec-block">
					<dt class="name h5">颜色</dt>
					<dd class="list">
						<span class="on">神秘黑</span>
						<span>橘色</span>
						<span>蓝色</span>
						<span>橙色</span>
					</dd>
				</dl>
				<dl class="spec-block">
					<dt class="name h5">尺码</dt>
					<dd class="list">
						<span class="on">大号</span>
						<span>中号</span>
						<span>小号</span>
					</dd>
				</dl>
			</div>
			<ol class="num-hand dm-clearfix">
				<li class="name h5 dm-left">数量</li>
				<li class="btn flex-row dm-right">
					<ul class="operate flex-row">
						<li class="btn reduce"></li>
						<li class="num">1</li>
						<li class="btn add"></li>
					</ul>
				</li>
			</ol>
			
		</div>
		
		<a class="max-btn" id="enterBtn">确定</a>
	</div>
</div>


<script type="text/javascript">

pullSwiper('#Main');

//点赞
$("#helpMod").click(function(){
	let target = $(this);
	if(target.hasClass('act')){
		target.removeClass('act');
		tip('取消赞');
	}else{
		target.addClass('act');
		tip('已赞');
	};
});

//收藏
$("#collectMod").click(function(){
	let target = $(this);
	if(target.hasClass('on')){
		target.removeClass('on');
		target.find('.txt').text('收藏');
		tip('取消成功');
	}else{
		target.addClass('on');
		target.find('.txt').text('已收藏');
		tip('收藏成功');
	};
});


//选择规格
$("#specMask .spec-block span").click(function(){
	$(this).addClass('on').siblings().removeClass('on');
	addTag();
});

//实时更新已选择的规格
function addTag(){
	var arr = [];
	$("#specMask .spec-block").each(function(){
		var target = $(this);
		arr.push(target.find('.on').text());
	});
	var spec = '';
	for(i in arr){
		spec += arr[i]+' ';
	};
	$("#selSpec").text(spec);
};

//立即购买或加入购物车
function buy(type){
	$("#specMask").show();
	if(type == 0){
		//立即购买
		$("#enterBtn").click(function(){
			location.href = 'enterOrder.html';
		});
	}else{
		//加入购物车
		$("#enterBtn").click(function(){
			closeSpecMask();
		});
	};
};


//关闭选择规格
function closeSpecMask(){
	$("#specMask").hide();
};

</script>

</body>
</html>
